<template>
  <div class="orderBox">
    <!-- 订单信息标题栏 -->
    <div class="order-header">
      <div class="tab-container">
        <!-- 委托标签 -->
        <div 
          :class="['tab-item', { active: activeTab === 'delegate' }]" 
          @click="switchTab('delegate')"
        >
          {{ _t18('25_weituo') }}({{ delegateCount }})
        </div>
        <!-- 仓位标签 -->
        <div 
          :class="['tab-item', { active: activeTab === 'position' }]" 
          @click="switchTab('position')"
        >
            {{ _t18('25_cangwei') }}
        </div>
      </div>
      <!-- 历史记录图标 -->
      <div class="history-icon" @click="showHistory">
        <img src="/static/img/Dp1_03b40873_l0y.e043f6c0.svg" alt="历史记录" />
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="order-content">
      <!-- 委托内容 -->
      <div v-if="activeTab === 'delegate'" class="tab-content">
        <!-- 加载状态 -->
        <div v-if="loading && delegateList.length === 0" class="loading-state">
          <van-loading type="spinner" color="#17AC74" />
          <div class="loading-text">loading...</div>
        </div>
        <div v-else-if="delegateList.length > 0" class="order-list">
          <van-list
            :finished="finished"
            :finished-text="_t18(`no_more_data`)"
            :loading-text="_t18(`loading`)"
            @load="onLoad"
            v-model:loading="loading"
          >
            <van-cell v-for="(item, index) in delegateList" :key="index" :border="false">
              <OrderItem
                :recordListItem="item"
                :currentEntruset="1"
                :availableBalance="availableBalance"
                @updateList="updateList"
                @updateUser="updateUser"
              ></OrderItem>
            </van-cell>
          </van-list>
        </div>
        <!-- 空数据状态 -->
        <div v-else class="empty-state">
          <img 
            src="/static/img/W2k_c7838bd9_spH.cd0c5744.png" 
            alt="暂无记录" 
            class="empty-icon"
          />
          <div class="empty-text"> {{ _t18('25_cangwei') }}</div>
        </div>
      </div>

      <!-- 仓位内容 -->
      <div v-if="activeTab === 'position'" class="tab-content">
        <!-- 加载状态 -->
        <div v-if="loading && positionList.length === 0" class="loading-state">
          <van-loading type="spinner" color="#17AC74" />
          <div class="loading-text">loading...</div>
        </div>
        <div v-else-if="positionList.length > 0" class="order-list">
          <van-list
            :finished="finished"
            :finished-text="_t18(`no_more_data`)"
            :loading-text="_t18(`loading`)"
            @load="onLoad"
            v-model:loading="loading"
          >
            <van-cell v-for="(item, index) in positionList" :key="index" :border="false">
              <OrderItem
                :recordListItem="item"
                :currentEntruset="0"
                :availableBalance="availableBalance"
                @updateList="updateList"
                @updateUser="updateUser"
              ></OrderItem>
            </van-cell>
          </van-list>
        </div>
        <!-- 空数据状态 -->
        <div v-else class="empty-state">
          <img 
            src="/static/img/W2k_c7838bd9_spH.cd0c5744.png" 
            alt="暂无记录" 
            class="empty-icon"
          />
          <div class="empty-text">{{ _t18('25_wushuju') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import OrderItem from './EntrustOrderItem.vue'
import { formatCurrentcurrency } from '@/utils/filters'
import { _t18 } from '@/utils/public'
import { onMounted } from 'vue'
import {
  submitUcontract,
  contractHistoryList,
  contractLossList,
  orderList
} from '@/api/trade/index'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
  coinInfo: {
    type: Object,
    default: () => {}
  },
  availableBalance: {
    type: Number
  }
})

// 当前激活的标签页
const activeTab = ref('delegate')

// 委托和仓位数据
const delegateList = ref([])
const positionList = ref([])
const delegateCount = ref(0)
const positionCount = ref(0)

// 加载状态
const loading = ref(false)
const finished = ref(false)
const pageSize = ref(10)
const pageNum = ref(1)

import { useUserStore } from '@/store/user/index'
const userStore = useUserStore()

/** 更新user */
const updateUser = () => {
  userStore.getUserInfo()
}

// 切换标签页
const switchTab = (tab) => {
  activeTab.value = tab
  pageNum.value = 1
  finished.value = false
  loading.value = false
  
  if (tab === 'delegate') {
    delegateList.value = []
    getDelegateList()
  } else {
    positionList.value = []
    getPositionList()
  }
}

// 显示历史记录
const showHistory = () => {
  // 跳转到量化合约订单页面
  router.push('/quantUstandardOrder')
}

// 获取委托列表
const getDelegateList = async () => {
  loading.value = true
  finished.value = false
  const data = {
    status: 0,
    pageSize: pageSize.value,
    pageNum: pageNum.value
  }
  
  try {
    const res = await orderList(data)
    if (res.code == '200') {
      setTimeout(() => {
        loading.value = false
        if (res.rows) {
          delegateList.value.push(...res.rows)
        }
        delegateCount.value = res.total || 0
        
        if (delegateList.value.length >= delegateCount.value) {
          finished.value = true
        } else {
          pageNum.value++
        }
      }, 500)
    } else {
      loading.value = false
      console.error('获取委托列表失败:', res.msg)
    }
  } catch (error) {
    loading.value = false
    console.error('获取委托列表失败:', error)
  }
}

// 获取仓位列表
const getPositionList = async () => {
  loading.value = true
  finished.value = false
  const data = {
    status: 0,
    pageSize: pageSize.value,
    pageNum: pageNum.value
  }
  
  try {
    const res = await contractHistoryList(data)
    if (res.code == '200') {
      setTimeout(() => {
        loading.value = false
        if (res.rows) {
          positionList.value.push(...res.rows)
        }
        positionCount.value = res.total || 0
        
        if (positionList.value.length >= positionCount.value) {
          finished.value = true
        } else {
          pageNum.value++
        }
      }, 500)
    } else {
      loading.value = false
      console.error('获取仓位列表失败:', res.msg)
    }
  } catch (error) {
    loading.value = false
    console.error('获取仓位列表失败:', error)
  }
}

// 上拉加载
const onLoad = () => {
  if (activeTab.value === 'delegate') {
    getDelegateList()
  } else {
    getPositionList()
  }
}

// 更新列表
const updateList = (val) => {
  handelRefresh()
}

// 刷新
const handelRefresh = () => {
  pageNum.value = 1
  finished.value = false
  loading.value = false
  
  if (activeTab.value === 'delegate') {
    delegateList.value = []
    getDelegateList()
  } else {
    positionList.value = []
    getPositionList()
  }
}

// 初始化
const init = () => {
  // 重置状态
  pageNum.value = 1
  finished.value = false
  loading.value = false
  delegateList.value = []
  positionList.value = []
  
  // 加载当前激活标签页的数据
  if (activeTab.value === 'delegate') {
    getDelegateList()
  } else {
    getPositionList()
  }
}

onMounted(() => {
  init()
})

defineExpose({
  init,
  handelRefresh
})
</script>

<style lang="scss" scoped>
.orderBox {
  background: #fff;
  overflow: hidden;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
}

.tab-container {
  display: flex;
  gap: 8px;
  width: 250px;
  padding: 5px 5px;
  
  background:#000;
  border-radius: 50px;
}

.tab-item {
  padding: 8px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  flex: 1;
  text-align: center;
  
  &.active {
    background: linear-gradient(135deg, #17AC74, #15a367);
    color: #fff;
    box-shadow: 0 4px 12px rgba(23, 172, 116, 0.3);
    transform: translateY(-1px);
  }
  
  &:hover:not(.active) {
    background: #e9ecef;
    transform: translateY(-1px);
  }
}

.history-icon {
  width: 46px;
  height: 46px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  background: #f8f9fa;
  
 
  
  img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
  }
 
}

.order-content {
  min-height: 300px;
  background: #fff;
}

.tab-content {
  padding: 0;
}

.order-list {
  // 订单列表样式
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  
  .empty-icon {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    opacity: 0.7;
    filter: grayscale(0.3);
    transition: all 0.3s ease;
    
    &:hover {
      opacity: 1;
      filter: grayscale(0);
      transform: scale(1.05);
    }
  }
  
  .empty-text {
    font-size: 16px;
    color: #8e9aaf;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-top: 8px;
  }
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  
  .loading-text {
    margin-top: 16px;
    font-size: 16px;
    color: #6c757d;
    font-weight: 500;
  }
}

:deep(.van-cell) {
  background: #fff !important;
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
}

:deep(.van-list__finished-text) {
  color: #999;
  font-size: 14px;
  padding: 20px 0;
  text-align: center;
}

:deep(.van-list__loading-text) {
  color: #666;
  font-size: 14px;
  padding: 20px 0;
  text-align: center;
}

// 响应式设计
 

 
</style>
